<template>
  <!-- 报警信息 -->
  <div class="FlScheduleAlert">
    <!-- 搜索框-->
    <div style="padding: 0px 0px;">
      <searchComponentsCss
          :searchData="searchData"
          :optionsZi="optionsZi"
          :searchOptionTable="searchOptionTable"
          :shrinkBoxOpenClose='shrinkBoxOpenClose'
          @searchCallBack="searchCallBack"
      ></searchComponentsCss>
      <!-- 收缩框 -->
      <div class="shrinkBox" @click="shrinkBoxOpenClose = !shrinkBoxOpenClose">
        <i :class="shrinkBoxOpenClose?'el-icon-arrow-up':'el-icon-arrow-down'" v-if="numSearch>8"></i>
      </div>
      <!-- @clearSearch='clearSearch' -->
      <div style="border-top:1px solid #E6E6E6;margin:0px 20px;"></div>
      <div class="right_row" style="padding: 25px 30px;">
        <!--新增按钮-->
        <buttonhurdle
            v-if="but_add"
            class="buttonhurdle"
            :diaDataAdd="searchData"
            :optionsZi="optionsZi"
            :searchOptionTable="searchOptionTable"
            :multipleSelection='multipleSelection'
            @toAdd="toAdd"
        ></buttonhurdle>
        <!--批量删除按钮-->
        <batches
            v-if="but_delBatches"
            class="buttonhurdle"
            @toDelete="toDelete"
        >
        </batches>
        <!-- 导出 Derived form-->
        <derivedTbale
            v-if="but_derivedTbale"
            class="importX"
            :suoS='suoS'
            :disabled='disabled'
            :multipleSelection='multipleSelection'
        />
        <!-- 导入 The import form-->
        <importTbale
            v-if="but_importTbale"
            style="margin-left:15px;"
            :importUrl='importUrl'
            @handleSuccessImport='handleSuccessImport'
        />
        <!-- 下载模板 Download the template-->
        <downloadTemplate
            v-if="but_downloadTemplate"
            style="margin-left:15px;"
        />
        <!-- 模板导入导出下载 -->
        <!-- <importXlsx
              class="importX"
              :importUrl='importUrl'
              :suoS='suoS'
              :disabled='disabled'
              :multipleSelection='multipleSelection'
              @handleSuccessImport='handleSuccessImport'
        /> -->
        <rightButtons
            class="right_buttons"
            @sunS_F='sunS_F'
            @emptySearch='emptySearch'
            @configuration='configuration'
            @goFatherComponent="goFatherComponent"
            :configurationData="searchData"
            :btn-switch-configuration="false"
        ></rightButtons>
      </div>
    </div>
    <!-- 表格 -->
    <div class="out">
      <!--数据列表-->
      <!-- 字典 -->
      <dictionariesPlus :searchData='searchData' :modelType='modelType' @optionData="dictionariesCallBack"></dictionariesPlus>
      <el-table
          ref="multipleTable"
          :data="dataAttribute"
          v-loading.body="false"
          border
          fit
          highlight-current-row
          size="mini"
          :cell-style="{padding:'5px 0'}"
          @selection-change="handleSelectionChange"
          @sort-change="sortChangeTable"
          max-height="511px"
      >
        <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="45"></el-table-column>
        <el-table-column
            align="center"
            label="序号"
            type="index"
            :index="indexMethod"
            width="54px"
        >
        </el-table-column>
        <el-table-column
            align="center"
            v-for="item in searchData"
            v-if="item.tableSign"
            :key="item.id"
            :label="item.CN"
            :prop="item.EN"
            :sortable="customMethod(item)"
            :show-overflow-tooltip="true"
            min-width="140px"
        >
          <template slot-scope="scope">{{item.type === 'select' ? optionDatas(item.typeGroupCode?optionsZi[item.EN]:searchOptionTable[item.EN],scope.row[item.EN]):scope.row[item.EN]}}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180px" fixed="right" v-if="but_look || but_edit ||but_del">
          <template slot-scope="scope" class="do">
            <!-- 查看按钮 -->
            <el-button
                v-if="but_look"
                style="color:#0B9AC3;border:none;"
                icon="el-icon-view"
                circle
                @click="makeExaId(scope.row.id)"
            ></el-button>
            <!-- 修改组件 -->
            <modificationi
                v-if="but_edit"
                class="inline_block"
                :attributeOrder="searchData"
                :optionsZi="optionsZi"
                :searchOptionTable="searchOptionTable"
                :modData="scope.row"
                @modifyData="modifyData"
            ></modificationi>
            <!-- 删除按钮 -->
            <el-button
                v-if="but_del"
                style="color:#C90010;border:none;"
                icon="el-icon-delete"
                circle
                @click="deleteList(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagetotal"
      ></el-pagination>
    </div>

    <!-- 查看组件 -->
    <examine
        :DialogVisibleMod="DialogVisibleExamine"
        :modData="examineData"
        :optionsZi="optionsZi"
        :searchOptionTable="searchOptionTable"
        :attributeOrder="searchData"
        @examineDialog="examineDialog"
    ></examine>
  </div>
</template>
<script>
//引入组件
import {
  SearchCForL,
  searchComponents,
  searchComponentsCss,
  examine,
  rightButtons,
  dictionaries,
  dictionariesPlus
  // importXlsx
} from "@/views/components/FLPage";
//引入组件
import {
  buttonhurdle,
  importXlsx,
  batches,
  derivedTbale,
  importTbale,
  modificationi,
  downloadTemplate
} from "@/views/components/revenueFLpage";
import {SAVE_CHECK_BOXS, GAIN_CHECK_BOXS} from "@/views/components/FLPage/fun/checkBoxFun";
import {
  addFlScheduleAlert, //增加
deleteFlScheduleAlert, //删除
searchFlScheduleAlert, //分页查询
modifyFlScheduleAlert, //修改
getFlScheduleAlert, //根据ID获取
exprotXls,//导出xlsx数据
    downTem //导出下载模板
} from "@/api/schedule/base/flScheduleAlert/index";
export default {
  components: {
    buttonhurdle,
    modificationi,
    examine,
    searchComponents,
    searchComponentsCss,
    importXlsx,
    rightButtons,
    dictionaries,
    dictionariesPlus,
    batches,
    derivedTbale,
    importTbale,
    downloadTemplate
  },
  name:'FlScheduleAlert',
  data() {
    return {
          but_add:true,
          but_delBatches:true,
          but_look:true,
          but_edit:true,
          but_del:true,
          but_derivedTbale:true,
          but_importTbale:true,
          but_downloadTemplate:true,
          // lookOver:true,
          // editField:true,
          // Deletebu:true,
          disabled:false,
          numSearch:0,
          //   收缩框开关
          shrinkBoxOpenClose:false,
          importUrl:'api/collection/flScheduleAlert/importXls',
          //搜索框
          suoS: {},
          //   搜索组件的数据 columnSize
          searchData: [
    {
      EN: "id",
      CN: "",
      value: "",
    type: "input",
    option: [],
    err: "长度为1-10位的数字!",
        Exp: "^[0-9]+(\\.[0-9]{1,10})?$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "alertPoliciesName",
      CN: "报警配置名称：如水质采集器：浊度，ph,余氮",
      value: "",
    type: "input",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "alertPoliciesId",
      CN: "报警类型id1.限值报警，2.开关量报警",
      value: "",
    type: "input",
    option: [],
    err: "长度为1-10位的数字!",
        Exp: "^[0-9]+(\\.[0-9]{1,10})?$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "alertStartDate",
      CN: "报警开始日期",
      value: "",
    type: "date",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "alertEndDate",
      CN: "报警结束日期",
      value: "",
    type: "date",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "alertLowest",
      CN: "报警值最低线值",
      value: "",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "alertLow",
      CN: "报警值底线值",
      value: "",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "alertHigh",
      CN: "报警值高限",
      value: "",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "alertHighest",
      CN: "报警值最高线",
      value: "",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "alertChange",
      CN: "报警变化率1-100%",
      value: "",
    type: "input",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "alertTimeType",
      CN: "报警时分秒，1.秒,2.分,3.时",
      value: "",
    type: "select",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "deviceId",
      CN: "设备id[fl_schedule_device]",
      value: "",
    type: "input",
    option: [],
    err: "长度为1-10位的数字!",
        Exp: "^[0-9]+(\\.[0-9]{1,10})?$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "deviceNo",
      CN: "设备编号",
      value: "",
    type: "input",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "deviceParameterId",
      CN: "参数id",
      value: "",
    type: "input",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "alertType",
      CN: "报警开关值当前参数是设置就报警 0,1，",
      value: "",
    type: "select",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
    {
      EN: "isOpen",
      CN: "是否开启报警0false,1true",
      value: "",
    type: "select",
    option: [],
    err: "长度为2-20位的所有字符!",
        Exp: "^.{2,20}$",
    result: true,
        sign: true,
        searchSign: true,
        addSign: true,
        tableSign: true,
        examineSign: true,
        examineDisabled: false,
        modificationSign: true,
        configurationSign: true
  },
  ],
    //添加弹窗的数据模型
    diaDataAdd: {
      yyqName: "",
          pqName: "",
          pqNum: "",
          BH: ""
    },
    //删除----Start--------------------------------------
    deleteDataList: [],
        //删除----End----------------------------------------

        //查看----Start--------------------------------------

        //查看的弹窗控制器
        DialogVisibleExamine: false,

        //查看的数据
        examineData: {},

    //查看----End----------------------------------------

    //表格数据
    //后端传来的数据
    dataAttribute: [],
        //表格选中1
        multipleSelection: [],

        //分页
        currentPage: 1, //当前页
        pagesize: 10, //每页条数
        pagetotal: 0, //总条数,
        modelType:'table',
        optionsZi:[],
        searchOptionTable:[]
  };
  },
  computed: {
    optionDatas(){
      return function (arr,val) {
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            if(arr[i].value == val){
              return arr[i].label;
            }
          }
        }
      }
    },
    customMethod() {
      return function (item) {
        return 'custom';
      }
    }
  },
  async created() {
    // 按钮权限配置
    // this.but_add = this.$store.state.user.elements['flScheduleAlert:but_add'];
    // this.but_delBatches = this.$store.state.user.elements['flScheduleAlert:but_delBatches'];
    // this.but_look = this.$store.state.user.elements['flScheduleAlert:but_look'];
    // this.but_edit = this.$store.state.user.elements['flScheduleAlert:but_edit'];
    // this.but_del = this.$store.state.user.elements['flScheduleAlert:but_del'];
    // this.but_derivedTbale = this.$store.state.user.elements['flScheduleAlert:but_derivedTbale'];
    // this.but_importTbale = this.$store.state.user.elements['flScheduleAlert:but_importTbale'];
    // this.but_downloadTemplate = this.$store.state.user.elements['flScheduleAlert:but_downloadTemplate'];
    // ------------------
    // this.but_search = this.$store.state.user.elements['flScheduleAlert:but_search'];
    // this.but_reset = this.$store.state.user.elements['flScheduleAlert:but_reset'];
    // this.but_pz = this.$store.state.user.elements['flScheduleAlert:but_peizhi'];

    //获取保存的’配置‘
    //1.ajax
    this.getSSearchNum()
    let userId = this.$store.state.user.id;
    let routerName = this.$route.path;
    let peizhiData = await GAIN_CHECK_BOXS(userId, routerName);
    //2.判断数据库里面是否有 以前存过的配置信息
    if (peizhiData!='') {
      //3.解析(序列化)
      this.searchData = JSON.parse(peizhiData);
    }
  },
  methods: {
    // 搜索框
    getSSearchNum(){
      let searchData = this.searchData
      let num = 0
      for (let i = 0; i < searchData.length; i++) {
        const element = searchData[i];
        if (element.searchSign) {
          num +=1
        }
        else{
          num = num
        }
      }
      this.numSearch = num
    },
    // 排序
    sortChangeTable(obj){
      // 上升
      let prop = obj.prop
      // 排序  需求  将驼峰形式的字段 改为 下划线形式的字段
      let abc = prop.replace(/([A-Z])/g, "_$1").toLowerCase()
      if (obj.order === 'ascending') {
        let suoS = this.suoS
        suoS.sortName = abc
        suoS.sortType = obj.order
        this.forData(this.currentPage, this.pagesize, suoS); //刷新列表

      }else if(obj.order === 'descending'){
        let suoS = this.suoS
        suoS.sortName = abc
        suoS.sortType = obj.order
        this.forData(this.currentPage, this.pagesize, suoS); //刷新列表
        // 下降
      }else{
        // 正常
        let suoS = this.suoS
        suoS.sortName = abc
        suoS.sortType = ''
        this.forData(this.currentPage, this.pagesize, suoS); //刷新列表
      }
    },
    handleSuccessImport(newValue){
      if (newValue == '导入成功') {
        this.forData(this.currentPage, this.pagesize, this.suoS);
      }
    },
    //配置的子组件通知
    async goFatherComponent(OverData) {
      //1.修改父组件的视图***************
      this.searchData = JSON.parse(JSON.stringify(OverData));
      //2.保存’配置‘的更改
      let obj = {};
      //三个参数都是string类型***********
      obj["userId"] = this.$store.state.user.id; //1
      obj["routerName"] = this.$route.path; ///jiChuZiLiao/flBook
      obj["stringData"] = JSON.stringify(OverData); //相当于this.searchData转成了字符串格式    [{"EN":"id","CN":"主键","value":""...
      //封装好的发请求方法*****************
      let save_check_boxs = await SAVE_CHECK_BOXS(obj);
    },
    // 配置
    configuration(msg){
      if (msg == '配置') {
        console.log(msg);
      }
    },
    // 重置
    emptySearch(msg){
      if (msg == '重置') {
        this.suoS = {};
        let suoS = this.suoS
        suoS.communityCode = this.areaCode
        this.forData(this.currentPage, this.pagesize,suoS);
      }
    },
    // 字典组件回调
    dictionariesCallBack([a={}, b={}]) {
      // 正常字典
      this.optionsZi = a;
      // 跨表字典
      this.searchOptionTable = b;
      this.forData(this.currentPage, this.pagesize, this.suoS);
    },
    //搜索
    sunS_F(msg) {
      if (msg == '搜索') {
        this.currentPage = 1;
        this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
      }
    },
    //查询组件回调
    searchCallBack(newData) {
      let obj={};
      for(let i=0;i<newData.length;i++){
        obj[newData[i].EN]=newData[i].value;
      }
      this.suoS=obj;
    },
    //渲染数据初始
    forData(page, size, searchData) {
      searchFlScheduleAlert(page, size, searchData).then(response => {
        this.pagetotal = response.data.total;
        this.dataAttribute = response.data.list;
        if (this.dataAttribute.length ==0) {
          this.disabled = true
        }else{
          this.disabled = false
        }
      }).catch(
          this.disabled = true
      );
    },
    //添加用户--新增表单组件传来的参数
    toAdd(addData) {
      let obj = {};
      for (let i = 0; i < addData.length; i++) {
        obj[addData[i].EN] = addData[i].value;
      }
      addFlScheduleAlert(obj).then(response => {
        this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
        if (response.flag) {
          this.$message({
            message: response.message,
            type: "success"
          });
        }
        else{
          this.$message({
            message: response.message,
            type: "warning"
          });

        }
      }).catch(()=>{
        this.$message.error("添加失败");
      })
    },
    //按钮栏传递了删除命令
    toDelete(orderstring) {
      this.$confirm("确认删除？").then(_ => {
        let idArr = [];
        for (let i = 0; i < this.deleteDataList.length; i++) {
          idArr.push(this.deleteDataList[i].id);
        }
        if (idArr.length == 0) {
          this.$message({
            message:'请选择要删除的数据',
            type:'warning'
          })
          return;
        }
        deleteFlScheduleAlert(idArr).then(response => {
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          this.$message({
            message:'删除成功',
            type:'success'
          })
        }).catch(error => {
          this.$message({
            message:'删除失败',
            type:'warning'
          })
        });
      }).catch(_ => {});
    },
    //单项删除
    deleteList(id) {
      let arrId = [id];
      this.$confirm("确认删除？").then(_ => {
        deleteFlScheduleAlert(arrId).then(response => {
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          this.$message({
            message:'删除成功',
            type:'success'
          })
        });
        done();
      }).catch(_ => {});
    },
    //查看
    makeExaId(id) {
      getFlScheduleAlert(id).then(response => {
        let copyDialog = true;
        this.DialogVisibleExamine = copyDialog;
        // console.log(response);
        this.examineData = response.data;
      }).catch(error => {
        alert("获取失败");
      });
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false;
    },

    //修改
    modifyData(value, modData) {
      if (value) {
        let id = modData.id;
        modifyFlScheduleAlert(id, modData).then(response => {
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          if (response.flag) {
            this.$message({
              message: response.message,
              type: "success"
            });
          }
          else{
            this.$message({
              message: response.message,
              type: "warning"
            });

          }
        }).catch(error => {
          this.$message({
            message:'修改失败',
            type:'warning'
          })
          this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
        });
      } else {
        this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
      }
    },
    //表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //传递删除的参数
      this.deleteDataList = val;
    },

    //分页
    handleSizeChange(val) {
      console.log("每页 " + val + " 条");
      this.pagesize = val;
      this.forData(this.currentPage, val, this.suoS);
    },
    handleCurrentChange(val) {
      console.log("当前页: " + val);
      this.currentPage = val;
      this.forData(val, this.pagesize, this.suoS);
    },
    // 序号
    indexMethod(index){
      var currentPage = this.currentPage;
      var pagesize = this.pagesize;
      this.$nextTick(function(){
        currentPage = this.currentPage;
        pagesize = this.pagesize;
      });
      return currentPage*pagesize -pagesize +1+index
    },
    // 下载模板请求
    exprotXlsx: exprotXls,
    downloadFile: downTem
    //工具栏组件传来的参数
    // FTableFunction(attributeOrderCloneTwiceL) {
    //   this.attributeOrder = attributeOrderCloneTwiceL;
    // },
  }
};
</script>
<style scoped src="@/styles/allCssP.css"></style>
<style lang="scss" scoped>
.FlScheduleAlert{
.shrinkBox{
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  height: 25px;
  // border-bottom:1px solid #E6E6E6;
}
/deep/.el-table--mini{
  .gutter{
    display: table-cell!important;
  }
  .el-checkbox__inner{
    width: 12px;
    height: 12px;
  }
  /deep/.el-table__body-wrapper{
    .el-table__body{
      tbody{
        .el-table__row{
          height: 45px !important;
        }
      }
    }
  }
  // 改变表头的高度  改为45px
  .el-table__header-wrapper{
    .el-table__header{
      .has-gutter{
        tr{
          th{
            padding: 5px 0 !important;
            height: 34px;
            line-height: 34px;
          }
        }
      }
    }
  }
  // 表头操作固定定位
  .el-table__fixed-right{
    .el-table__header{
      thead{
        tr{
          th{
            padding: 5px 0 !important;
            height: 34px;
            line-height: 34px;
          }
        }
      }
    }

  }
}
.right_row{
  display: flex !important;
  justify-content: start;
  align-items: center;
  .buttonhurdle{
    padding: 0px;
    padding-right: 15px;
  }
  .right_buttons{
    position: absolute;
    right: 30px;
    padding: 0px;
  }
}
.do{
  display: flex;
}
.pagination{
  text-align: left;
  margin-top: 15px;
}
}
</style>
